<template>
  <div class="sub-card-home">
    <el-radio-group v-model="radio1" size="small" @change="reload">
      <el-radio-button label="面积"/>
      <el-radio-button label="数量"/>
    </el-radio-group>
    <div ref="chart" id="sub-left1" style="width: 100%;height:200px" v-if="radio1 === '面积'"/>
    <div ref="chart1" id="sub-left2" style="width: 100%;height:200px" v-if="radio1 === '数量'"/>
  </div>
</template>

<script lang="ts">
import {createComponent} from 'echarts-for-vue';
import * as echarts from 'echarts';
import {getCurrentInstance, h, onMounted, ref} from 'vue';
import {defineComponent, reactive} from "vue";

export default defineComponent({
  name: "quzhengtongji",
  setup() {
    let data = reactive([]);
    let data1 = reactive([])
    let myChart = null
    const radio1 = ref("面积")
    let sum = reactive({
      value: '',
      area: '',
    })
    const instance = getCurrentInstance();
    const api = instance?.appContext.config.globalProperties.api;
    const {appContext} = getCurrentInstance();

    const reload=()=>{
      appContext.config.globalProperties.axios.post(`api/landArea`)
          .then((response) => {
            data.length = 0
            data1.length = 0
            response.data.forEach(item => {
              let object: any = {}
              let object1: any = {}
              object.name = item.name
              object1.name = item.name
              object.value = item.value
              object1.value = item.area
              data.push(object)
              data1.push(object1)
            })
          })
      appContext.config.globalProperties.axios.post(`api/sum`)
          .then((response) => {
            response.data.forEach(item => {
              sum.value = item.value
              sum.area = item.area
            })
          })
      setTimeout(()=>{
        let chart = document.getElementById('sub-left1');
        myChart = echarts.init(chart);
        let option1 = {
          title: {
            text: "总面积",
            subtext: sum.area+"亩",
            left: "center",
            top: "25%",
            itemGap: 0,
            textStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
            },
            subtextStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
              align: "center",
              verticalAlign: "middle"
            },
          },
          series: [
            {
              type: "pie",
              radius: ["70%", "50%"],
              label: {
                color: "rgba(255, 255, 255, 0.85)",
                formatter: '{b}: {c}亩',
                fontFamily: "PingFang SC",
                align: "right",
                fontStyle: "normal",
                fontSize: 10,
                fontWeight: 400,
                width: 200,
              },
              color: ["#71A0FF", "#F5DF4C", "#FE7A92", "#64FFDA", "#BA68C8", "#72D572", "#FFB74D"],
              data: data1,
              bottom: "35%",
              labelLine: {
                length: 17,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                  type: "solid"
                }
              }
            },
          ],
          legend: {
            data: data,
            icon: 'rect',
            textStyle: {
              color: 'rgba(251, 247, 247, 1)'
            },
            width: "100%",
            itemHeight: 9,
            bottom: "0%",
          },
        };
        myChart.setOption(option1)

      },1000)
      setTimeout(()=>{
        let chart = document.getElementById('sub-left2');
        myChart = echarts.init(chart);
        let option = {
          title: {
            text: "总数量",
            subtext: sum.value+"个",
            left: "center",
            top: "25%",
            itemGap: 0,
            textStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
            },
            subtextStyle: {
              fontSize: 14,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
              align: "center",
              verticalAlign: "middle"
            },
          },
          series: [
            {
              type: "pie",
              radius: ["70%", "50%"],
              label: {
                color: "rgba(255, 255, 255, 0.85)",
                formatter: '{b}: {c}个',
                fontFamily: "PingFang SC",
                align: "right",
                fontStyle: "normal",
                fontSize: 10,
                fontWeight: 400,
                width: 200,
              },
              color: ["#71A0FF", "#F5DF4C", "#FE7A92", "#64FFDA", "#BA68C8", "#72D572", "#FFB74D"],
              data: data,
              bottom: "35%",
              labelLine: {
                length: 17,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                  type: "solid"
                }
              }
            },
          ],
          legend: {
            data: data,
            icon: 'rect',
            textStyle: {
              color: 'rgba(251, 247, 247, 1)'
            },
            width: "100%",
            itemHeight: 9,
            bottom: "0%",
          },
        };
        myChart.setOption(option)
      },1000)
    }
    onMounted(() => {
      reload()
    })
    return {
      data,
      data1,
      radio1,
      sum,
      reload
    }
  }
})
</script>


<style scoped lang="scss">
.sub-card-home {
  .el-radio-group {
    margin-left: 74%;
    flex-wrap:nowrap;
  }
}
</style>

